<template>
    <div style="text-align:left;">
        <!--订单信息-->
        <div>
            <el-row>
                <el-col :span="6">
                    <div style="border:1px solid #dcdcdc;border-radius: 5px;padding:0px 20px;">
                        <h3>动态</h3>
                        <el-timeline :reverse="reverse">
                            <el-timeline-item v-for="(activity, index) in activities" :key="index"
                                :timestamp="activity.timestamp">
                                {{ activity.content }}
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </el-col>
                <el-col :span="18">
                    <div style="border:1px solid #dcdcdc; border-radius: 5px;margin:0px 10px;padding:0px 20px;">
                        <h3>订单信息</h3>
                        <el-row  style="margin-top:10px;">
                            <el-col :span="12">订单编号：{{ orderNo1 }}</el-col>
                            <el-col :span="12">订单金额：￥25852.00</el-col>
                        </el-row>
                        <el-row style="margin-top:10px;">
                            <el-col :span="12">订单状态：J0316130316133</el-col>
                            <el-col :span="12">下单时间：{{row.orderTime}}</el-col>
                        </el-row>
                        <el-row  style="margin-top:10px;">
                            <el-col :span="12">收件人：{{orderMaster.recivedName}}</el-col>
                            <el-col :span="12">联系电话：{{orderMaster.recivedPhone}}</el-col>
                        </el-row>
                        <el-row  style="margin-top:10px;">
                            <el-col :span="12">详细地址：{{orderMaster.recivedAddress}}</el-col>
                            <el-col :span="12">&nbsp;</el-col>
                        </el-row>
                        <hr />
                        <el-row  style="margin-top:10px;">
                            <el-col :span="12">支付方式：</el-col>
                            <el-col :span="12">支付时间：</el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!--商品信息-->
        <div></div>

        <!--退货信息-->
        <div></div>
    </div>
</template>

<script>
export default {
    props:{
        orderNo1:String
    },
    data() {
        return {
            orderNo:'',
            orderMaster:{},
            orderProduct:[],
            orderLogistic:[],
            row:{},
            reverse: true,
            activities: [{
                content: '活动按期开始',
                timestamp: '2018-04-15'
            }, {
                content: '通过审核',
                timestamp: '2018-04-13'
            }, {
                content: '创建成功',
                timestamp: '2018-04-11'
            }]
        };
    },
    mounted(){
        this.row = this.$route.params.row
        this.orderNo = this.row.orderNo
        this.onloadOrderDetailData()
    },    
    methods:{        
        //加载订单明细数据（订单信息、订单商品信息、订单物流信息）
        onloadOrderDetailData(){
            let url='http://localhost:5164/order/first?orderNo='+this.orderNo
            this.$http.get(url).then(res=>{
                if(res.data.code == 200){
                    //赋值
                    this.orderMaster = res.data.data.master
                }
            })
        }
    }
};
</script>